<template>
<view class="pb-60">
  <nav-bar :showBack="false" >
    <view class="pl-13 flex_a_c">
      <view class="nav_bg">
        <view class="face"></view>
      </view>
      <view class="nav_txt">魔镜魔镜告诉我</view>
    </view>
  </nav-bar>
  <view v-if="isShowTips" @click="onCloseTips" class="guide" :style="{ top: totalHeight - 3 + 'px'}">方便每日查看 添加到我的小程序</view>
  <view class="line"></view>
  <template>
    <view class="title flex_center">
      {{ date.state }}, <view class="user_name flex_a_c">
      @<text class="user_name ell-1"
          v-if="userInfo.nick_name && !isFocus"
          @click="onChangeNickName"
        >{{userInfo.nick_name}}</text>
        <input
          v-if="isFocus"
          :disabled="Boolean(userInfo.birthday)"
          :maxlength="10"
          v-model="userInfo.nick_name"
          :class="[userInfo.nick_name ? 'nick_name_input' : 'nick_name_input']"
          ref="nickNameDom"
          type="nickname"
          @click="userNameFocus"
          @blur="userNameInput"
          placeholder="请填写你的昵称"
        ></view> ，今天是{{ date.month }}月{{ date.strDate }}日，{{ date.week }}
    </view>
    <!-- <view class="txt">{{ luckyTxt }}</view> -->
    <!-- 昵称头像生日某一个未填写 不出弹框 -->
    <template v-if="!isShowEdit">
      <view  class="avatar" v-if="userInfo.birthday" @click="isShow = true">
        <view  v-if="!userInfo.avatar" class="avatar_empty"></view>
        <image v-else class="avatar_img" :src="userInfo.avatar"></image>
      </view>
      <button v-else class="avatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
        <view  v-if="!userInfo.avatar" class="avatar_empty"></view>
        <image v-else class="avatar_img" :src="userInfo.avatar"></image>
      </button>
    </template>
    
    <image v-else class="avatar" @click="isShow = true" :src="userInfo.avatar"></image>
    <!-- 未填写头像显示提示 -->
    <template v-if="!userInfo.avatar">
      <view class="tips" >添加头像</view>
    </template>
    <!-- <view v-if="!isShowEdit" class="lucky des">{{ des }}</view> -->
    <view v-if="!userInfo.birthday" class="lucky des">{{ des }}</view>
    <!-- 生日 -->
    <DatePicker  v-if="!userInfo.birthday" @on-success="onChooseSuccess">
    <!-- <DatePicker  v-if="!isShowEdit" @on-success="onChooseSuccess"> -->
      <view class="sex_box flex_b_c">
        <view :class="['birth', userInfo.birthday && 'normal' ]">{{ userInfo.birthday || '年 - 月 - 日' }}</view>
        <view class="example">如 2000-01-02</view>
      </view>
    </DatePicker>
    <!-- <view v-if="!isShowEdit" class="sex_box flex_b_c">
      <input class="birth flex1" :maxlength="10" type="number" v-model="userInfo.birthday" @input="onChangeBirth" placeholder="年 - 月 - 日">
      <view class="example">如 2000-01-02</view>
    </view> -->
    <template v-if="userInfo.birthday">
      <view class="tags flex_center mt-32">
        <view :class="['tag_item mr-48', type === 1 && 'on']" @click="type = 1">建议</view>
        <view :class="['tag_item', type === 2 && 'on']" @click="type = 2">{{ luckyTxt }}</view>
      </view>
      <view v-show="type === 1" class="lucky advise">{{ daily_reminders }}</view>
      <view v-show="type === 2" class="lucky">{{ content }}</view>
    </template>
  </template>
  <image :class="['break', type === 1 && 'break_more']" src="http://content.daylucky.cn/admin/image/d2g2f5x8ca1z0zb05lt7bv3l.png"></image>
  <navigator url="/pages/self/index" hover-class="none" class="link_box pl-80 mt-100">
    <view class="link_title">关于自己</view>
    <view class="link_txt">Embrace yourself. <image class="link_icon" src="http://content.daylucky.cn/admin/image/w0h4h3ljq0ibok6rtk1a86xh.png"></image></view>
  </navigator>
  <navigator url="/pages/other/index" hover-class="none"  class="link_box pl-80 mt-122">
    <view class="link_title">关于他人</view>
    <view class="link_txt">Seek others. <image class="link_icon" src="http://content.daylucky.cn/admin/image/w0h4h3ljq0ibok6rtk1a86xh.png"></image></view>
  </navigator>
  <modifyInfo v-if="isShow" :isShow.sync="isShow" :edit="userInfo"  @on-success="onSuccess" />
</view>
</template>
<script>
import { getNowFormatDate } from '@/utils'
import modifyInfo from '@/components/v2/modifyInfo1.vue'
import { getTodayLucky, postUserUpdate } from '@/api'
import onLogin from '@/utils/login'
import { uploadSync } from '@/utils/upload'
import { inputBirthday } from '@/mixins/birthday';
import DatePicker from '@/components/v2/datePicker.vue'
export default {
  name: 'Home',
  mixins:[ inputBirthday ],
  components: {
    modifyInfo,
    DatePicker
  },
  data() {
    return {
      des: '首次进入,请填写你的年月日,上传头像,查看星座运势',
      isFirstRequest: false,
      userInfo: {},
      date: {},
      isFocus: true,
      type: 1,
      content: '',
      daily_reminders: '',
      luckyTxt: '',
      totalHeight: this.totalHeight,
      isShow: false,
      isShowTips: false
    }
  },
  onLoad({ type }) {
    if (type) {
      this.$storage.setStorage('channel', type)
    }
  },
  computed: {
    isShowEdit() {
      let { nick_name, avatar, birthday } = this.userInfo
      var regex = /^(?:202[0-4]|20[01][0-9]|[1-19]\d{3})-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$/;
      return nick_name && avatar && birthday && regex.test(birthday) && this.validateDateString(birthday)
      // if (!regex.test(birthday)) {
      //   return false
      // }
      // if (!this.validateDateString(birthday)) {
      //   return false
      // }
      // if (!nick_name || !avatar || !birthday) {
      //   return false
      // }
      // return true
      
    },
  },
  watch: {
    userInfo: {
      handler(n) {
        var regex = /^(?:202[0-4]|20[01][0-9]|[1-19]\d{3})-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$/;
        if (n.birthday && regex.test(n.birthday) && this.validateDateString(n.birthday) && this.isFirstRequest) {
          this.fnGet(n.astro_id)
        }
        //   // 只有完善信息了之后才能请求 防止先填写生日在填写其他信息大致只有生日星座
        //   this.fnGet(n.astro_id)
        // }
        // if (this.isShowEdit && this.isFirstRequest) {
        //   // 只有完善信息了之后才能请求 防止先填写生日在填写其他信息大致只有生日星座
        //   this.fnGet(n.astro_id)
        // }
        this.isFirstRequest = true
      },
      // immediate: true,
      // deep: true
    }
  },
  async created() {
    // 是否显示提示
    if (!this.$storage.hasStorage('isShowTips')) {
      this.isShowTips = true
    }
    this.date = getNowFormatDate()
  },
  async onShow() {
    if (!this.$storage.hasStorage('access_token')) {
			this.userInfo = await onLogin()
		} else {
      this.userInfo = this.$storage.getStorage('userInfo')
    }
    this.isFocus = !this.userInfo.nick_name
    var regex = /^(?:202[0-4]|20[01][0-9]|[1-19]\d{3})-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$/;
    if (this.userInfo.birthday && regex.test(this.userInfo.birthday) && this.validateDateString(this.userInfo.birthday)) {
      this.fnGet(this.userInfo.astro_id)
    }
  },
  methods: {
     async onChooseSuccess(birth_day) {
      const { code, data } = await postUserUpdate({ ...this.userInfo, birth_day })
      if (code === 1000) {
        let info = this.$storage.getStorage('userInfo')
        this.$storage.setStorage('userInfo', { ...info, ...data })
        this.userInfo = data
        console.log(this.userInfo, data, 'shanbao')
        // if (info.nick_name && info.avatar) {
        //   try {
        //     data.astro_id !== '' && this.fnGet(data.astro_id)
        //   } catch (error) {
        //   }
        // }
      }
    },
    onSuccess(info) {
      this.userInfo = info
      this.isFocus = !this.userInfo.nick_name

      console.log(this.userInfo, 'astro_id')
      // watch监听了此处不用再请求了 防止重复请求
      // this.fnGet(this.userInfo.astro_id)
    },
    onChangeNickName() {
      if (this.userInfo.birthday) {
        this.isShow = true
        return false
      }
      if (!this.userInfo.avatar || !this.userInfo.birthday) {
        this.isFocus = true
        this.$nextTick(() => {
          this.$refs.nickNameDom.focus()
        })
      } else {
        this.isShow = true
      }
    },
    
    onChooseAvatar(event) {
      this.userInfo.avatar = event.detail.avatarUrl
      uploadSync(event.detail.avatarUrl).then(async image_url => {
        this.userInfo.avatar = image_url
        this.onUpdateUserInfo()
      })
    },
    userNameFocus(e) {
      if (this.userInfo.birthday) {
        this.isShow = true
      }
    },
    userNameInput(e) {
      this.userInfo.nick_name = e.detail.value.slice(0, 10)
      this.isFocus = !this.userInfo.nick_name
      this.onUpdateUserInfo()
    },
    onCloseTips() {
      this.isShowTips = false
      this.$storage.setStorage('isShowTips', true)
    },
    onFocus() {
      // 可选：在聚焦时重置原始生日值
      this.rawInput = '';
      // this.formattedBirth = '';
    },
    async fnGet(astro_id) {
      const { code, data } = await getTodayLucky({ astro_id, version: 2 })
      if (code === 1000) {
        this.luckyTxt = data.date_title
        this.daily_reminders = data.daily_reminders.content
        this.des = data.des
        this.content = data.content.replace(/[，。]/g, $1 => {
          console.log($1, `${$1}\n`)
          return `${$1}\n`
        })
        console.log(this.content)
      }
    },
    
  }
}
</script>
<style lang="scss" scoped>
.nav_bg {
  width: 46rpx;
  height: 78rpx;
  margin-right: 12rpx;
  position: relative;
  background: url(http://content.daylucky.cn/admin/image/xmtln7vqqy6j1re28tq2y0a2.png) no-repeat center top/ auto 100%;
  
  .face {
    position: absolute;
    background: url( http://content.daylucky.cn/admin/image/fll1ztcmlpnocggev9stsdum.gif) no-repeat center top / auto 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 46rpx;
    height: 42rpx;
  }
}
.nav_txt {
  font-family: pf_regular;
  font-weight: 400;
  font-size: 28rpx;
  color: #000000;
  line-height: 33rpx;
}
.line {
  width: 686rpx;
  margin: 0 auto;
  margin-top: 18rpx;
  height: 0rpx;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  border-bottom: 2rpx solid rgba(0,0,0,0.2);
}
  .title {
    font-family: pf_regular;
    font-weight: 400;
    font-size: 26rpx;
    color: #000000;
    line-height: 36rpx;
    text-align: center;
    margin-top: 46rpx;
    .user_name {
      // display: inline-block;
      max-width: 260rpx;
      position: relative;
      &.empty {
        color: rgba(0,0,0,0.4)
      }
      &:after {
        content: '';
        width: 96rpx;
        position: absolute;
        left: 0;
        width: 100%;
        bottom: -4rpx;
        height: 2rpx;
        background: #F16AA5;
        border-radius: 0rpx 0rpx 0rpx 0rpx;
      }
      .nick_name_input {
        display: inline-block;
        width: 200rpx;
        height: 36rpx;
        line-height: 36rpx;
      }
    }
  }
  .txt {
    font-family: pf_regular;
    font-weight: 400;
    font-size: 38rpx;
    color: #000000;
    line-height: 45rpx;
    text-align: center;
    margin-top: 50rpx;
  }
  .avatar {
    width: 176rpx;
    height: 176rpx;
    border-radius: 176rpx;
    display: block;
    margin: 48rpx auto 0;
    display: block;
    overflow: hidden;
    .avatar_empty {
      width: 176rpx;
      height: 176rpx;
      background: #E1E1E1 url(http://content.daylucky.cn/admin/image/o5nlvls15c0x7bl6k34gahlr.png) no-repeat center / 72rpx 72rpx;
    }
    .avatar_img {
      width: 100%;
      height: 100px;
      border-radius: 176rpx;
    }
  }
  .tips {
    font-size: 26rpx;
    color: #000000;
    line-height: 30rpx;
    text-align: center;
    margin-top: 16rpx;
    font-family: pf_regular;
  }
  .lucky {
    font-family: pf_regular;
    white-space: pre-line;
    font-weight: 400;
    font-size: 26rpx;
    color: #000000;
    line-height: 39rpx;
    text-align: center;
    margin-top: 46rpx;
    &.advise {
      font-family: pf_medium;
      padding: 0 50rpx;
      font-weight: 500;
      font-size: 32rpx;
      line-height: 48rpx;
      margin-top: 126rpx;
    }
    &.des {
      max-width: 622rpx;
      margin: 48rpx auto 0;
    }
  }
  .break {
    width: 30rpx;
    height: 132rpx;
    display: block;
    margin: 80rpx auto 0;
    &.break_more {
      margin-top: 152rpx;
    }
  }
  .link_box {
    .link_title {
      font-family: pf_medium;
      margin-bottom: 8rpx;
      font-weight: 500;
      font-size: 36rpx;
      color: #000000;
      line-height: 36rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
    .link_txt {
      font-weight: 400;
      font-size: 28rpx;
      display: inline-block;
      height: 40rpx;
      color: #000000;
      line-height: 40rpx;
      border-bottom: 2rpx solid #000000;
    }
    .link_icon {
      width: 22rpx;
      height: 16rpx;
      margin-left: 6rpx;
    }
  }
.sex_box {
  width: 590rpx;
  margin: 24rpx auto 0;
  height: 76rpx;
  position: relative;
  padding-left: 2rpx;
  padding-right: 26rpx;
  line-height: 76rpx;
  .birth {
    font-family: pf_bold;
    height: 76rpx;
    line-height: 76rpx;
    font-weight: 600;
    font-size: 32rpx;
    color: rgba(0,0,0,.4);
    &.normal {
      color: rgba(0,0,0,1);
    }
    .year {
      width: 80rpx;
    }
  }
  &:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4rpx;
    width: 590rpx;
    height: 4rpx;
    background: #000000;
    border-radius: 22rpx 22rpx 22rpx 22rpx;
  }
  .example {
    font-weight: 400;
    font-size: 24rpx;
    font-family: pf_regular;
    color: #000000;
    line-height: 28rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
}
.guide {
  width: 400rpx;
  height: 68rpx;
  font-family: pf_regular;
  font-weight: 400;
  font-size: 24rpx;
  color: #FFFFFF;
  line-height: 28rpx;
  line-height: 82rpx;
  position: fixed;
  right: 102rpx;
  text-align: center;
  z-index: 10;
  background: url(http://content.daylucky.cn/admin/image/4ydbcw6hft6s7kp4vxmzuuvp.png) no-repeat left top/ 400rpx 68rpx;
}
.tags {
  padding-bottom: 52rpx;
  border-bottom: 2rpx solid #000000;
  .tag_item {
    height: 56rpx;
    font-family: pf_regular;
    font-weight: 400;
    font-size: 40rpx;
    width: 160rpx;
    color: rgba(0,0,0,0.4);
    line-height: 56rpx;
    text-align: center;
    font-style: normal;
    text-transform: none;
    &.on {
      color: rgba(0,0,0, 1);
      position: relative;
      &:after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: -72rpx;
        transform: translateX(-50%);
        width: 40rpx;
        height: 40rpx;
        background: url(http://content.daylucky.cn/admin/image/ez4ib0bimoo97jlcu87d3i6g.png)  no-repeat left top/ 40rpx 40rpx;


      }

    }
  }
}
</style>
